<template>
	<view class="content" style="background-color: #f5f5f5;">
		<view class="top">
			<u-navbar scrollable=false :placeholder='true' bgColor="#f5f5f5" :autoBack="true" title="">
				<view slot="right" class="input_right flex">
					<view class="top_left">
						<!-- 商品 -->
						<uni-data-select v-model="valueSe" :localdata="range" @change="change"></uni-data-select>
					</view> 
					<text style="color: #e0e0e0;">|</text>
					<u-search placeholder="请输入搜索内容" @search="search" bgColor='white' shape="square" searchIconSize='0'
						:showAction="false" v-model="keyword"></u-search>
					<!-- <image src="/static/images/search/camera.png" style="width: 48rpx;height: 48rpx;" mode=""></image> -->
				</view>
			</u-navbar>
		</view>
		<!-- 未搜索展示 -->
		<view class="">
			<view class="history fontS28" v-if="list.length>0">
				<view class="flex flexJBC" >
					<text class="fw6 fontS28">搜索历史</text>
					<image src="../../static/images/mess/trash_1.png" style="height: 48rpx;width: 48rpx;" mode="" @click="del">
					</image>
				</view>
				<view class="history_list flex">
					<view v-for="(item,index) in list"  :key="index" class="li co3 fontS28" @click="$my.go('/pages/search/result?keyword=' + item.name + '&type=' + valueSe)">
						{{item.name}}
					</view>
					<!-- <u-empty width='162px' height="140px" :show='list.length==0' ></u-empty> -->
				</view>
			</view>
			<view class="history everybody fontS28">
				<view class="flex flexJBC">
					<text class="fw6 fontS28">大家都在搜</text>
				</view>
				<view class="history_list flex">
					<view v-for="(item,index) in orUser" :key="index" class="li co3 fontS28"  @click="$my.go('/pages/search/result?keyword=' + item.name + '&type=' + valueSe)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="tip" v-if="false">
				<view v-for="(item,index) in list3" :key="index" class="li">
					{{item}}
				</view>
			</view>
			<view class="history like fontS28">
				<view class="flex flexJBC">
					<text class="fw6 fontS28">猜你喜欢</text>
				</view>
				<List :showTopTitle="false" :list="likeList" v-if="likeList.length>0"/>
			</view>
		</view>
	</view>
</template>



<script>
	import List from '@/componentes/list.vue'
	export default {
		data() {
			return {
				orUser:[],
				page:1,
				valueSe: 0, //下拉框
				keyword: '', //搜索框
				range: [{
						value: 0,
						text: "商品"
					},
					{
						value: 1,
						text: "旗舰店"
					},
					{
						value: 2,
						text: "批发商"
					},
				],
				searchtype: [{
					name: '全部',
				}, {
					name: '批发商',
				}, {
					name: '旗舰店'
				}],
				likeList:[],//猜你喜欢列表
				list: [], //搜索历史
				list3: ['女装', '手机', '儿童玩具'], //输入提示
			}
		},
		components: {
			List
		},
		onReachBottom() {
			this.page++;
			this.getlikeList()
		},
		onShow() {
			this.getSearchList()
			this.getlikeList()
		},
		methods: {
			// 删除搜索列表
			del(){
				this.$my.post('/index/Search/delSearchHistory').then(res=>{
					this.$my.toast(res.message)
					if(res.code==200){
						this.getSearchList()
					}
				})
			},
			// 猜你列表
			getlikeList(){
				this.$my.post('/index/Product/getGuesslike',{page:this.page,limit:10}).then(res=>{
					if(res.code==200){
						this.likeList=this.likeList.concat(res.data.data)
					}
				})
			},
			// 0商品 1店铺 2工厂
			change(e) {
				this.valueSe = e
				console.log('change', this.valueSe);
			},
		
			// 搜索
			search() {
				this.$my.go('/pages/search/result?keyword=' + this.keyword + '&type=' + this.valueSe)
			},
			// 搜索历史
			getSearchList() {
				this.$my.get('/index/Search/findSearchHisory', {
					type: 1
				}).then(res=>{
					if(res.code==200){
						this.list=res.data.user
						this.orUser=res.data.orUser
						console.log(res.data,'////');
					}
				})
			}
		}
	} 
</script>

<style lang="scss" scoped>
	/deep/  .uni-select__selector-item{
		white-space: nowrap;
	}
	/deep/.uni-select {
		width: 125rpx ;
		padding: 0;  
		border: 0;
		text-align: center;
	}

	/deep/.input_right {
		width: 180%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	/deep/.u-navbar__content__right {
		left: 10%;
	}

	.content {
		.top {
			margin-bottom: 20rpx;

			.top_left {
				margin-right: 20rpx;

			}
		}

		.history {
			padding: 0 4%;
			line-height: 56rpx;
			margin: 32rpx 0 20rpx;

			// background-color: tomato;
			.history_list {
				width: 100%;
				flex-wrap: wrap;

				.li {
					background-color: white;
					padding: 8rpx 28rpx;
					margin-top: 10rpx;
					margin-right: 20rpx;
					border-radius: 12rpx;
				}
			}
		}

		.tip {
			.li {
				padding: 20rpx 4%;
				border-bottom: 2rpx solid #e9e9e9;
			}
		}
	}
</style>
